<template>
  <div class="index-view">
    <div class="mainNav">
      <!-- 一楼  导航栏 -->
      <div class="mainNavWrap">
        <div class="autoWidth">
          <router-link to="/">
            <img src="https://www.hzsp.com/images/logo.png" alt="" />
          </router-link>
          
        </div>
      </div>

      <!-- 第二楼 轮播图 时间表 -->
      <div class="bannerTop">
        <div class="banner-center">
          <!-- 左轮播图 -->
          <div class="bannerLeft">
            <el-carousel indicator-position="outside" style="width: 640px; height: 360px">
              <el-carousel-item v-for="src in imgList" v-bind:key="src">
                <img v-bind:src="src" alt="" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 右时间表 -->
          <div class="bannerRight">
            <h3>杭州野生动物园</h3>
            <div class="timeTable">
              <img src="https://www.hzsp.com/booking/images/ds1.png" alt="" />
              <h5>开放时间</h5>
              <p id="bDate">9:30-16:30</p>
            </div>

            <div class="timeTable">
              <img src="https://www.hzsp.com/booking/images/ds2.png" alt="" />
              <h5>景点地址</h5>
              <p id="bDizhi">浙江省杭州市拱墅区沪指山路武林门府</p>
            </div>

            <div class="timeTable">
              <img src="https://www.hzsp.com/booking/images/ds3.png" alt="" />
              <h5>景区电话</h5>
              <a id="bPhone">400-123-1234</a>
            </div>

          </div>
        </div>
      </div>

      <!-- 三楼 -->

      <div class="shopCard">
        <div class="shop-card-center">
          <div class="wirte"></div>
          <div class="shop-main">
            <div class="witer"></div>
            <div class="shop-btn">
              <button v-for="(p,i) in btns" @click="goData(p.id)" class="btn-card"
                v-bind:class="{isActiveBtn: p.id === lid}" :key="i">
                {{p.name}}
              </button>
            </div>
            <!-- data组件 -->
            <div class="shop-an">
              <!-- date -->
              <date></date>
            </div>
            <div class="shop-date">
              <!-- lac -->
              <lac :item="this.lid"></lac>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部组件 -->
      <bot></bot>
      <div class="fbtn">
        <fbtn></fbtn>
      </div>
    </div>
    <div class="go">
      <div>
        <span>数量:<span>0</span></span>
      </div>
      <div>
        <span>合计:￥<span>0</span></span>
      </div>
      <button>去结算</button>
    </div>
  </div>
</template>

<script>
import Bot from '@/components/index/Bot.vue';
import Lac from '@/components/index/Lac.vue';
import Date from '@/components/index/date.vue';
import Fbtn from '@/components/index/fbtn.vue';
export default {
  components: { Bot, Lac, Date, Fbtn },

  data() {
    return {
      imgList: [
        "https://adm.hzsp.com/uploads/20220227/e98dcc6c4d640482562f3f0aafa47589.jpg",
        "https://adm.hzsp.com/uploads/20211229/9984dac1367eb68e8c5bedcc0a74c376.jpg",
        "https://adm.hzsp.com/uploads/20220831/147f92211ef7badaa9d0aba3f8b72c89.jpg",
        "https://adm.hzsp.com/uploads/20220905/843e39633e73d4a9cc246f0c021c9a0d.jpg",
      ],
      btns: [{ id: 1, name: '门票' }, { id: 2, name: '年卡' }, { id: 3, name: '礼品卡/礼品票' }],
      lid: 1
    }
  },
  methods: {
    goData(id) {
      console.log('goData', id)
      this.lid = id
    }

  },
};
</script>

<style lang="scss" scoped>
.fff {
  background: #fff;
}

.wirte {
  height: 25px;
  width: 100%;
}

// 导航栏
.mainNav {
  // min-width: 1500px;

  // 一楼背景
  .mainNavWrap {
    // min-width: 1500px;
    height: 103px;
    background: url(https://www.hzsp.com/images/headBg.jpg);

    // 一楼版心
    .autoWidth {
      height: 100%;
      width: 1200px;
      margin: 0 auto;

      // 图标剧中
      a>img {
        margin-top: 15px;
        margin-left: 15px;
      }
    }
  }

  // 二楼背景
  .bannerTop {
    width: 100%;
    height: 360px;
    // min-width: 1500px;
    background: url(https://www.hzsp.com/images/p2Bg.jpg);

    // 二楼版心
    .el-carousel__item>img {
      width: 640px;
      height: 100%;
      background-size: cover;
      margin: 26px 0;
    }

    .banner-center {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;

      // 二楼左面轮播图
      .bannerLeft>img {
        width: 100%;
        height: 100%;
        background-size: cover;
        margin: 26px auto;
      }

      // 二楼右面时间表
      .bannerRight {
        margin: 26px auto;
        width: 500px;
        height: 300px;

        h3 {
          font-weight: initial;
          color: #41822b;
          font-size: 36px;
          margin-top: 35px;
        }

        .timeTable {
          border-bottom: 1px solid #d2d3d2;
          display: flex;
          justify-content: flex-start;
          align-items: flex-end;
          margin: 20px 0;

          h5 {
            margin: 0 15px;
          }
        }
      }
    }
  }

  // 三楼

  .shopCard {
    width: 100%;
    // height: 800px;
    background: url(https://www.hzsp.com/booking/images/bg.jpg);
    background-repeat: round;

    .shop-card-center {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: block;

      .shop-main {
        height: auto;
        background: #fff;
        margin: 0 auto;

        .shop-btn {
          // transform: translateY(20px);
          transform: translate(100px, 20px);

          :nth-child(2) {
            margin: 0 25px;
          }

          .btn-card {
            font-size: 17px;
            width: 25%;
            background: url(https://www.hzsp.com/images/repeat/aa.jpg);
            height: 50px;
            line-height: 50px;
            // text-align: center;
            // border-top: 1px solid #cbcbcb;
            border-radius: 30px;
            color: #fff;
            border: 1px solid rgba(214, 214, 214, 1);
          }

          .btn-card.isActiveBtn {
            background: url(https://www.hzsp.com/images/repeat/buyBg.jpg);
          }

          .shop-date {
            height: 50px;

            background: #ccc;
          }

          .shop-an {
            height: 400px;
            background: #bbb;
          }
        }

        .lac {
          width: 500px;
          height: 300px;
        }
      }
    }
  }
}

// 四楼
.fbtn {
  position: fixed;
  right: 2px;
  top: 50%;
}

.go {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: flex-end;

  button {
    width: 100px;
    height: 80%;
    background: #ff8300;
    border-radius: 25px;
    border: 0px;
    color: #fff;
  }
}
</style>
